<template>
	<div>
		<!-- 头部搜索框 -->
		<router-link to="/home/search" >
		<van-search v-model="value" placeholder="商品搜索,共239件好物" />
		</router-link>
		<!-- 小灰条 -->
		<span class="line"></span>
		<!-- 侧边导航栏 -->
					 <div class="cation-left">
						 <van-sidebar v-model="activeKey" >
						   <van-sidebar-item @click="getTabList(item.id)"  :title="item.name"   v-for="item in indexaction"  :key="item.id"/>
						   </van-sidebar>
						  
					 </div>
					
		<!-- 子区域展示内容 -->
		<div class="cation-right">
			 <img :src="currentOne.banner_url" alt="">
			 <p>&#8212{{currentOne.name}}分类&#8212</p>
			 <div  class="cation-right-item" >
			<div class="cation-right-son"  v-for="item in currentaction "  :key="item.id">
			
				<router-link :to="`/cation/cationSon?id=${item.id}`">
					<img :src="item.wap_banner_url" alt="">
					{{item.name}}
					</router-link>
					
		    </div>
			</div>
		</div>
		
		
		<!-- 尾巴标签 -->
	</div>
</template>

<script>
	import{
		indexaction,
		currentaction
	} from "../../api/cation/index.js"
	export default{
		data(){
			return{
				  value: '',
				 activeKey: 0,
				 indexaction:[],
				 currentaction:[],
				 currentOne:[],
			}
		},
		created(){
			this.init()
			
		},
		methods:{
			//祖接口
			async init(){
				var res = await indexaction()
				console.log(res)
				this.indexaction = res.data.categoryList
				//子接口
				 var result = await currentaction({
				 	id:this.indexaction[0].id
				 })
				  this.currentaction = result.data.data.currentOne.subList
				  this.currentOne = result.data.data.currentOne
				 console.log(result)
				
			},
			 async    getTabList(val){
				   var result = await currentaction({
					id:val	
				})
				this.currentOne = result.data.data.currentOne
				 this.currentaction = result.data.data.currentOne.subList
				 
			}
		},
	}
</script>

<style scoped lang="scss">
	 @import "./scss/index.scss";
	 // 小灰条
	 .line{
		 width: 100%;
		 height: 2px;
		 background-color: #C8C9CC;
		 display: block;
		
	 }
	 // 侧边导航栏
	 .cation-left{
		 width: 20%;
		 float: left;
		 margin-top: 10px;
	 }
	 // 子区域展示内容区
	 .cation-right{
		 img{
			 display: block;
			 width: 263px;
			 height: 111px;
			 margin: 0 auto;
		 }
		 p{
			font-size: .32rem;
			    color: #333;
			    padding: 0 .13333rem; 
		 }
		 text-align: center;
		 margin-top: 10px;
		width:76%;
		margin-left: 10px;
		 // background-color: red;
		float: right;
		.cation-right-item{
			width:80%;
			display: flex;
			flex-wrap: wrap;
			.cation-right-son{
				a{
					color: #000000;
				}
				width:28%;
				margin-left: 12px;
				img{
					display: block;
					width: 80px;
					height: 80px;
				}
			}
			
		}
	 }
</style>
